import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { DNavBar, DModal } from '@/components'
import DHeader from './component/header'
import DContent from './component/content'
import DList from './component/list'
import DFooter from './component/footer'
import classNames from 'classnames'
import http from '@/api'
import sdk from '@/common/sdk'
import dayjs from 'dayjs'
import './itemdetail.scss'

class DItemOrder extends Component {

  constructor(props) {
    super(props)
    this.state = {
      bgImages: require('../assets/bgImages.png'),
      title: "承运订单",
      headerobj: {
        itemtime: {
          isShowDay: false,
          isShowHour: true,
          day: 0,
          hours: 0,
          minutes: 0,
          seconds: 0
        }
      },
      status: '',
      id: '',
      isShow: false,
      item: {},
      modal1: '',
      crmodal: '',
      firstList: {
        info: [
          {
            label: "委托方企业",
            value: ""
          },
          {
            label: "委托方联系人",
            value: ""
          },
          {
            label: "联系方式",
            value: ""
          }
        ]
      },
      secondList: {
        title: "始发地信息",
        info: [
          {
            label: "始发地联系人",
            value: ""
          },
          {
            label: "联系方式",
            value: ""
          },
          {
            label: "始发地地址",
            value: ""
          }
        ]
      },
      threeList: {
        title: "目的地信息",
        info: [
          {
            label: "目的地联系人",
            value: ""
          },
          {
            label: "联系方式",
            value: ""
          },
          {
            label: "目的地地址",
            value: ""
          }
        ]
      },
      fourList: {
        title: "运输信息",
        info: [
          {
            label: "运输费用",
            value: ""
          },
          {
            label: "发车日期",
            value: ""
          },
          {
            label: "托运车辆1",
            value: ""
          },
          {
            label: "车架号1",
            value: ""
          }
        ]
      },
      fiveList: {
        info: [
          {
            label: "托运车辆2",
            value: ""
          },
          {
            label: "车架号2",
            value: ""
          }
        ]
      },
      sixList: {
        info: [
          {
            label: "备注",
            value: ""
          }
        ]
      },
      dlist1: {
        list: [
          {
            title: '验车图片'
          }
        ]
      },
      dlist2: {
        list: [
          {
            title: '合同凭证'
          }
        ]
      }
    }
  }

  componentWillMount() {
    let { id, status } = this.$router.params

    this.getDetailList(id)
    this.setState({
      headerobj: {
        title: this.getStatus(status)
      },
      id,
      status
    })
  }

  componentDidShow() {
    sdk.setTitleInfo(this.state.title)
  }


  getDetailList(id) {
    let { firstList, secondList, threeList, fourList, fiveList, sixList } = this.state
    http.getOrderTransDetail({ id }).then(res => {
      if (res.orStatus !== this.$router.params.status) {
        Taro.showToast({
          title: '订单状态已更新',
          icon: 'none'
        }).then(date => {
          Taro.redirectTo({
            url: `/pages/itemdetail/itemorder?id=${res.id}&status=${res.orStatus}`
          })
        })
      }
      let _firstList = ['entName', 'creator', 'creatorContact']
      firstList.info.map((item, i) => {
        item.value = res[_firstList[i]]
      })

      let _secondList = ['cdStartConner', 'orSaleContact', 'cdStartAddr']
      secondList.info.map((item, i) => {
        item.value = res[_secondList[i]]
      })

      let _threeList = ['cdEndConner', 'cdEndPhone', 'cdEndAddr']
      threeList.info.map((item, i) => {
        item.value = res[_threeList[i]]
      })

      let _fourList = ['orPrice', 'cdStartDate', 'cdCarType', 'cdCarNo']
      fourList.info.map((item, i) => {
        item.value = res[_fourList[i]] + (i === 0 ? '元' : '')
        if (_fourList[i] === 'cdCarType' && res.cdCarType.split('#').length > 1) {
          item.value = res.cdCarType.split('#')[0]
        }
        if (_fourList[i] === 'cdCarNo' && res.cdCarNo.split('#').length > 1) {
          item.value = res.cdCarNo.split('#')[0]
        }
      })
      let _fiveList = ['cdCarType', 'cdCarNo']
      fiveList.info.map((item, i) => {
        item.value = res[_fiveList[i]].split('#')[1]
      })


      let _sixList = ['cdRemark']
      sixList.info.map((item, i) => {
        item.value = res[_sixList[i]] || '(空)'
      })
      //根据订单状态计算倒计时
      let orStatus = this.$router.params.status
      let times = ''
      if (orStatus === '21') {
        let createTime = dayjs(res.createTime).add(30, 'minute')
        times = createTime.diff(dayjs(), 'day', 'true')
      } else if (orStatus === '42') {
        let createTime = dayjs(res.updateTime).add(3, 'day')
        times = createTime.diff(dayjs(), 'day', 'true')
      } else {
        times = 0
      }
      this.setState({
        firstList,
        secondList,
        threeList,
        fourList,
        fiveList,
        sixList,
        headerobj: {
          ...this.state.headerobj,
          account: res.orNo,
          text: this.getText(orStatus),
          tiptext: this.getPlatformTxt(orStatus),
          itemtime: {
            isShowDay: false,
            isShowHour: true,
            day: times,
            hours: 0,
            minutes: 0,
            seconds: 0
          }
        },
        item: res
      })
      // debugger
    })
  }

  getStatus(status) {
    return {
      $21: '待接单',
      $31: '待上传',
      $32: '待托运方确认',
      $41: '待上传',
      $42: '待托运方确认',
      $43: '待核实',
      $51: '交易成功',
      $52: '已拒接',
      $53: '已撤回',
      $54: '已超时',
      $55: '交易异常',
      $59: '待确认退款',
    }[`$${status}`]
  }

  getPlatformTxt(orstatu) {
    return {
      $21: '系统将自动拒绝接单',
      $32: '请耐心等候',
      $42: '将自动确认',
      // $43: '将自动确认'
    }[`$${orstatu}`]
  }
  getText(orstatu) {
    return {
      $21: '请确认消息以及是否接单',
      $31: '请上传验车照片供托运方确认',
      $32: '买家正在确认验车图片',
      $33: '平台正在核实订单',
      $41: '请在交易完成后上传与订单相关的合同以及交易凭证',
      $42: '买家正在核实订单，请耐心等候',
      $43: `平台将在<text style='font-size:20px;font-weight:bold;color:#FFAE00'>5</text>日内核实订单，逾时将自动确认`,
      $51: '亲，恭喜你成功完成一笔订单！企业管理员可提现运输费',
      $52: '该订单已拒接',
      $53: '很遗憾，该订单已被托运方取消',
      $54: '该订单已超时',
      $55: '您的订单交易异常，平台客服已介入并终止',
    }[`$${orstatu}`]
  }
  handleCarPhoto() {
    Taro.navigateTo({
      url: `/pages/checkimg/checkimg?id=${this.state.id}&status=0`
    })
  }
  handleContact() {
    Taro.navigateTo({
      url: `/pages/contractprooftran/contractprooftran?id=${this.state.id}&status=${0}`
    })
  }
  hanleFirst(status) {
    let isShow = true
    this.setState({
      isShow,
      crmodal: status,
      modal1: '您是否拒绝接受订单？'
    })
  }


  handleLast(status) {
    let isShow = true
    this.setState({
      isShow,
      crmodal: status,
      modal1: '您是否确认接受订单？'
    })
  }
  cancelMyList(id) {  //拒绝接单
    http.cancelMyList2({ id }).then(res => {
      Taro.redirectTo({
        url: `/pages/itemdetail/itemorder?id=${id}&status=52`
      })
    })
  }
  confirmMyList(id) { //接受订单
    http.confirmMyList({ id }).then(res => {
      Taro.redirectTo({
        url: `/pages/itemdetail/itemorder?id=${id}&status=31`
      })
    })
  }
  onClose() {
    this.setState({
      isShow: false
    })
  }
  onLastHandle() {
    let { crmodal, id } = this.state
    this.onClose()
    if (crmodal === '1') {
      this.cancelMyList(id)

    }
    if (crmodal === '2') {
      this.confirmMyList(id)

    }
  }
  handleUploadContract() {
    let { item } = this.state
    Taro.redirectTo({
      url: `/pages/caruploadtran/caruploadtran?id=${item.id}&orNo=${item.orNo}`
    })
  }
  handleLast1() {
    let { item } = this.state
    Taro.redirectTo({
      url: `/pages/deliveryupload/deliveryupload?id=${item.id}&orNo=${item.orNo}`
    })
  }
  hanleFirst1() {
    let { item } = this.state
    http.htwlTemplate(item.id).then(res => {
      // 下载合同接口
      const a = document.createElement('a');
      const url = res.data;
      const filename = '车辆运输合同';
      a.href = url;
      a.download = filename;
      a.click();
    })
    // 下载合同接口
  }
  render() {
    const {
      bgImages,
      title,
      isShow,
      modal1,
      firstList,
      secondList,
      threeList,
      fourList,
      fiveList,
      sixList,
      dlist1,
      dlist2,
      status,
      headerobj
    } = this.state
    return (
      <View className='b_itemdetail'>
        <Image src={bgImages} className={classNames('b_itemdetail__imagebs', process.env.NODE_ENV === 'development' ? '' : 'b_itemdetail__NODEimg')}></Image>
        <DNavBar title={title} className='b_itemdetail__nav'></DNavBar>
        <View className='b_itemdetail__box'>
          <View className='b_itemdetail__content'>
            <DHeader {...headerobj}></DHeader>
            <DContent {...firstList}></DContent>
            <DContent {...secondList}></DContent>
            <DContent {...threeList}></DContent>
            <DContent {...fourList}></DContent>
            {fiveList.info[0].value && <DContent {...fiveList}></DContent>}
            <DContent {...sixList}></DContent>
            {status > 31 && status < 52 &&
              <DList {...dlist1} handleClick={this.handleCarPhoto.bind(this)}></DList>
            }
            {status > 41 && status < 52 &&
              <DList {...dlist2} handleClick={this.handleContact.bind(this)}></DList>
            }
            {status === '21' &&
              <DFooter firstText='拒绝接单' onFirstClick={this.hanleFirst.bind(this, '1')} secondText='接受订单' onSeconClick={this.handleLast.bind(this, '2')}></DFooter>
            }
            {status === '31' &&
              <DFooter onFirstClick={this.hanleFirst1.bind(this)} secondText='上传验车' onSeconClick={this.handleLast1.bind(this)}></DFooter>
            }
            {status === '41' &&
              <DFooter firstText='上传合同' onFirstClick={this.handleUploadContract.bind(this)}></DFooter>
            }
          </View>
        </View>

        <DModal
          isShow={isShow}
          title='提示'
          text={modal1}
          firstbtn='取消'
          lastbtn='确认'
          onFirst={this.onClose.bind(this)}
          onCancel={this.onClose.bind(this)}
          onLast={this.onLastHandle.bind(this)}
        ></DModal>
      </View>
    )
  }

}


export default DItemOrder
